@charset "utf-8";
@import "../functions";

@ns-sum: summary-;
@rate-reduce: #c40707;
@rate-add: #1b9451;
@sum-min-height: 142px;

.@{ns-sum}wrap {
    width: 100%;
    .pos(r);
    min-height: @sum-min-height;
    background: @B050;

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

.@{ns-sum}div-ul {
    .d-b;
    width: 100%;
    background: @B050;
    list-style: none;
    margin: 0;
    padding: 0;
    .clearfix;

    &.border-bottom {
        border-bottom: 1px solid @B200;
    }

    &.li1 {
        .@{ns-sum}div-li {
            width: 100%;
        }
    }

    &.li2 {
        .@{ns-sum}div-li {
            width: 50%;
        }
    }

    &.li3 {
        .@{ns-sum}div-li {
            width: 33.3333333%;
        }
    }

    &.li4 {
        .@{ns-sum}div-li {
            width: 25%;
        }
    }

    &.li5 {
        .@{ns-sum}div-li {
            width: 20%;
        }
    }

    &.li6 {
        .@{ns-sum}div-li {
            width: 16.66666667%;
        }
    }

    &.li7 {
        .@{ns-sum}div-li {
            width: 14.2857%;
        }
    }

    &.li8 {
        .@{ns-sum}div-li {
            width: 12.5%;
        }
    }

    &.li9 {
        .@{ns-sum}div-li {
            width: 11.1111111%;
        }
    }

    &.li10 {
        .@{ns-sum}div-li {
            width: 10%;
        }
    }
}

.@{ns-sum}div-li {
    min-height: @sum-min-height;
    padding: 18px;
    .fl;
    height: 100%;
    .pos(r);

    &:hover {
        background: @B200;
    }

    &.choose {
        background: @B200;

        .@{ns-sum}triangle {
            .d-b;
        }
    }

    ul, li {
        width: 100%;
        .d-b;
        cursor: default;
        word-break: break-all;
    }

    ul.canClick {
        cursor: pointer;

        & li {
            cursor: pointer;
        }
    }
}

.@{ns-sum}setting-wrap {
    .pos(a);
    right: 10px;
    top: 18px;

    .@{ns-sum}setting-icon {
        color: @B600;
        width: 16px;
        height: 16px;
        text-align: center;
        display: block;
        line-height: 16px;

        i {
            line-height: 16px;
            width: 16px;
            text-align: center;
        }

        &:hover {
            color: @B900;
        }
    }
}

.@{ns-sum}setting-panel {
    .pos(a);
    top: 23px;
    right: -9px;
    z-index: 9;
    .d-n;

    &.open {
        .d-b;
    }

    .@{ns-sum}setting-panel-arrows {
        .d-b;
        width: 14px;
        height: 7px;
        background: url("img/arrow-top.png");
        .pos(a);
        top: -6px;
        right: 10px;
        z-index: 9;
    }

    .@{ns-sum}setting-panel-body {
        width: 500px;
        min-height: 188px;
        overflow-y: auto;
        padding: 18px;
        background: white;
        border: 1px solid @B300;
        border-bottom: none;
    }

    .@{ns-sum}setting-panel-footer {
        background: @B050;
        padding: 18px;
        .tr;
        border: 1px solid @B300;
        border-top: none;
    }
}

.@{ns-sum}setting-panel-body {
    .@{ns-sum}setting-panel-text {
        color: @B600;
        .clearfix;
    }

    .@{ns-sum}reset {
        .fr;
    }
}

.@{ns-sum}setting-ul {
    .clearfix;

    .@{ns-sum}setting-li {
        .fl;
        width: 222px;
        margin-top: 6px;

        &.mr {
            margin-right: 18px;
        }
    }
}

.@{ns-sum}triangle {
    .triangle-t(@w:14px,@color:@B050);
    bottom: -2px;
    .pos(a);
    margin: 0 auto;
    left: 0;
    right: 0;
    display: none;
}

/***
Custom Class
***/
.@{ns-sum}span-title {
    font-size: 16px;
    //line-height: 18px;
    color: @B600;
}

.@{ns-sum}span-value {
    font-size: 30px;
    margin: 20px 0px 5px;
    color: @H500;
    font-weight: 300;
}

.@{ns-sum}span-rate {
    font-size: 14px;
    word-wrap: break-word;
    text-align: right;
    display: block;
    padding-right: 20px;

    &.add {
        color: @rate-add;
    }

    &.reduce {
        color: @rate-reduce;
    }
}
